
<template>
  <h1>mapState映射的getters的数据也不具备响应式</h1>
  <h2>年龄: {{age}}</h2>
  <h3>生日: {{birth}}</h3>
  <h3>getters的月份:{{infoMonth}}</h3>
  <h3>年龄阶段：{{s_ageState}}</h3>
  <button @click="age = 16">点修改年龄</button>
  <hr>
  <h1>mapWritableState映射的getters的数据也不具备响应式</h1>
  <h3>getters的月份:{{z_infoMonth}}</h3>
  <h3>年龄阶段：{{ageState}}</h3>
  <button @click="z_infoMonth = 5">点修改月份</button>
  <button @click="ageState = '1111'">点修改年龄</button>
</template>
<script >
import { mapState,mapWritableState } from 'pinia'
import { useInfoStore } from "../stores/useInfoStore";

export default {
  computed:{
    // 从store 取getters和去state用法一样，都可以用mapstate
    // 1.0 数组形式
      ...mapState(useInfoStore,['birth','infoMonth']),
    // 2.0 对象形式  别名
    ...mapState(useInfoStore,{
      s_ageState: 'ageState',
    }),
    // 3.0 数组形式
    ...mapWritableState(useInfoStore,['ageState','age']),
    // 4.0 对象形式  别名
    ...mapWritableState(useInfoStore,{
      z_infoMonth: 'infoMonth',
    })
  }
}

</script>
